<template>
  <div class="web-code-box">
    <!-- 背景图 -->
    <div class="bgc-img"></div>
    <!-- 内容区域 -->
    <div class="content-bottom-box">
      <!-- 头部标题位置 -->
      <div class="title-box">
        <h1>将岸上吧私有化部署为你自己的网站</h1>
      </div>

      <!-- 定价表title -->
      <div ref="priceRef" class="product">
        <product-price></product-price>
      </div>

      <!-- 卡片盒子title -->
      <introduce-title-vue
        title="你将获得超多资料"
        subtitle="资料远不止如此，作者解答才是最贴心的~"
        title-color="#000"
        subtitle-color="#7f8b96"
      ></introduce-title-vue>

      <!-- 介绍卡片 -->
      <div class="card-list-box">
        <div v-for="(item, index) in cardList" :key="index" class="card-box">
          <introduce-card-vue :card-data="item"></introduce-card-vue>
        </div>
      </div>
    </div>
    <!-- 联系我 -->
    <call-me></call-me>
    <el-backtop :right="50" :bottom="80" />
  </div>
</template>
<script lang="ts" setup>
  import IntroduceCardVue from './components/IntroduceCard.vue';
  import IntroduceTitleVue from './components/IntroduceTitle.vue';
  import ProductPrice from './components/ProductPrice.vue';
  import CallMe from "@/views/index/components/CallMe.vue";

  // 卡片内容
  const cardList = ref<Array<any>>([
    {
      iconfont: 'icon-codepen',
      title: '规范接口的前端源码',
      introduce: '岸上吧规整原版的接口规范，严格RESTful设计规范，最小化接口返回和字段标准驼峰式。'
    },
    {
      iconfont: 'icon-_houduankaifa',
      title: '完整的Java后端源码',
      introduce: '岸上吧使用SpringBoot开发后端，学习成本低，配置好数据库以及文件存储服务环境后可使用。'
    },
    {
      iconfont: 'icon-database',
      title: 'MySql数据库',
      introduce: '岸上吧使用的MySql数据库，提供相关测试数据。后续接入ES提供前端搜索'
    },
    {
      iconfont: 'icon-fuwuqi',
      title: 'S3文件存储',
      introduce: '网站文件上传支持所有S3存储,例如支持七牛云、阿里云、Minio等，手把手教你如何安装部署。'
    },
    {
      iconfont: 'icon-duqumoban',
      title: '超多模板',
      introduce: '提供超多word简历模板和PPT模板，可根据自己的需求选择是否上传到网站。提供Python批量处理模板脚本。'
    },
    {
      iconfont: 'icon-wendang',
      title: '前端项目部署文档',
      introduce: '全面的前端项目部署上线的文档，学会此文档，可以让你快速入门部署前端项目。'
    },
    {
      iconfont: 'icon-fuzhi',
      title: '后端项目部署文档',
      introduce: '规范的后端接口文档，以及数据库表结构文档，快速入手后端代码。'
    },
    {
      iconfont: 'icon-zhinan',
      title: '项目开发指南',
      introduce: '教你如何使用岸上吧项目，比如如何开发新的简历模板、开发后台接口等等。'
    },
    {
      iconfont: 'icon-zuozhe',
      title: '作者贴心服务',
      introduce: '添加源作者微信，作者为6年Java开发工程师，可以放心让作者解决相关问题，给你贴心的服务。'
    }
  ]);
</script>
<style lang="scss" scoped>
  .web-code-box {
    position: relative;
    width: 100%;
    min-height: 500px;
    z-index: 0;

    .bgc-img {
      width: 100%;
      height: 340px;
      background-image: linear-gradient(to right, #24b27e, #14959b);
      position: absolute;
    }
    .content-bottom-box {
      width: 1250px;
      margin: 0 auto;
      position: relative;
      .title-box {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 350px;
        align-items: center;
        color: white;
        h1 {
          color: #fff;
          font-size: 50px;
          // font-family: '站酷快乐体';
          letter-spacing: 4px;
          margin-bottom: 40px;
          margin-top: -30px;
        }
        .button {
          width: 120px;
          height: 38px;
          margin-right: 20px;
          line-height: 38px;
          text-align: center;
          letter-spacing: 2px;
          color: #fff;
          font-size: 14px;
          background-image: -webkit-linear-gradient(to right, #2ddd9d, #1cc7cf);
          background-image: -moz-linear-gradient(to right, #2ddd9d, #1cc7cf);
          background-image: -ms-linear-gradient(to right, #2ddd9d, #1cc7cf);
          background-image: linear-gradient(to right, #2ddd9d, #1cc7cf);
          -webkit-border-radius: 50px;
          -moz-border-radius: 50px;
          border-radius: 50px;
          background-color: #2ddd9d;
          -webkit-transition: all 0.3s;
          -moz-transition: all 0.3s;
          -ms-transition: all 0.3s;
          -o-transition: all 0.3s;
          transition: all 0.3s;
          cursor: pointer;
          user-select: none;
          &:hover {
            opacity: 0.8;
          }
        }
      }

      .card-list-box {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin: 80px 0 20px 0;
        .card-box {
          width: 33.33%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 40px;
        }
      }
    }

    .product {
      width: 100%;
      margin: 0 auto;
      margin-top: -150px;
    }
  }
</style>
